<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>使用jquery发送ajax请求</title>
<!--    引入jquery-->
    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
      $(function () {
        $("#checkButton").click(
                function () {
                  //发出ajax
                  /*
                    指定参数要在{}中，且需要指定参数名，顺序可以随意调整
                    dateType:"json" 要求服务器返回的数据格式是json
                   */
                  // $.ajax({
                  //   url:"/ajax/checkUserServlet2",
                  //   type:"POST",
                  //   data:{  //这里直接给json格式，传日期为了防止浏览器缓存
                  //     uname:$("#uname").val(),
                  //     date:new Date()
                  //   },
                  //   error:function () { //失败后回调函数
                  //     console.log("失败...")
                  //   },
                  //   success: function (data, status, xhr) {
                  //     console.log("成功...");
                  //     console.log("data = ", data);
                  //     console.log("status = ", status);
                  //     console.log("xhr = ", xhr);
                  //     //对返回的结果进行处理
                  //     if ("" !== data.username) {
                  //       $("#myres").val("该用户名可用")
                  //       $("#div1").text(JSON.stringify(data))
                  //     } else {
                  //       $("#myres").val("该用户名不可用")
                  //     }
                  //   },
                  //   dataType:"json"
                  // })


                  //.get()的使用
                  /*
                    省略了参数名，但是参数顺序固定
                   */
                  // $.get(
                  //         //url
                  //         "/ajax/checkUserServlet2",
                  //         //data
                  //         {
                  //           uname:$("#uname").val(),
                  //           date:new Date()
                  //         },
                  //         //success成功回调函数
                  //         function (data, status, xhr) {
                  //           console.log("成功...");
                  //           console.log("data = ", data);
                  //           console.log("status = ", status);
                  //           console.log("xhr = ", xhr);
                  //           //对返回的结果进行处理
                  //           if ("" !== data.username) {
                  //             $("#myres").val("该用户名可用")
                  //             $("#div1").text(JSON.stringify(data))
                  //           } else {
                  //             $("#myres").val("该用户名不可用")
                  //           }
                  //         },
                  //         //dataType
                  //         "json"
                  // )

                  //.post()的使用
                  /*
                    省略了参数名，但是参数顺序固定
                    $.post()和$.get()使用方法一样
                    唯一区别是请求类型为post
                   */
                  // $.post(
                  //         //url
                  //         "/ajax/checkUserServlet2",
                  //         //data
                  //         {
                  //           uname:$("#uname").val(),
                  //           date:new Date()
                  //         },
                  //         //success成功回调函数
                  //         function (data, status, xhr) {
                  //           console.log("成功...");
                  //           console.log("data = ", data);
                  //           console.log("status = ", status);
                  //           console.log("xhr = ", xhr);
                  //           //对返回的结果进行处理
                  //           if ("" !== data.username) {
                  //             $("#myres").val("该用户名可用")
                  //             $("#div1").text(JSON.stringify(data))
                  //           } else {
                  //             $("#myres").val("该用户名不可用")
                  //           }
                  //         },
                  //         //dataType
                  //         "json"
                  // )

                  //.getJson()使用
                  /*
                    如果通过jquery发出的ajax请求是get，并且返回的数据格式是json
                    可以直接使用getJson()
                   */
                  $.getJSON(
                          //url
                          "/ajax/checkUserServlet2",
                          //data
                          {
                            uname:$("#uname").val(),
                            date:new Date()
                          },
                          //success成功回调函数
                          function (data, status, xhr) {
                            console.log("成功...");
                            console.log("data = ", data);
                            console.log("status = ", status);
                            console.log("xhr = ", xhr);
                            //对返回的结果进行处理
                            if ("" !== data.username) {
                              $("#myres").val("该用户名可用")
                              $("#div1").text(JSON.stringify(data))
                            } else {
                              $("#myres").val("该用户名不可用")
                            }
                          }
                  )
                }
        )



      })
    </script>
  </head>
  <body>
  <h1>用户注册jquery+ajax</h1>
  <form action="/ajax/checkUserServlet2" method="post">
    用户名字:<input type="text" name="username" id="uname">
    <input type="button" id="checkButton" value="验证用户名">
    <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
    用户密码:<input type="password" name="password"><br/><br/>
    电子邮件:<input type="text" name="email"><br/><br/>
    <input type="submit" value="用户注册">
  </form>
  <h1>返回的json数据</h1>
  <div id="div1"></div>
  </body>
</html>